<script setup>
	import {
		reactive
	} from 'vue';
	import NavBar from '../../components/nav-bar'
	const register = reactive({
		username: '',
		code: '',
		password: '',
		repassword: ''
	})
	// 手机状态栏的高度
	const {
		statusBarHeight
	} = uni.getSystemInfoSync()

	// 注册
	function submit() {
		uni.request({
			url: 'http://recommender.starsky.fun/Home/Public/reg',
			data: {
				username: register.username,
				code: register.code,
				password: register.password,
				repassword: register.repassword
			},
			method: 'POST',
			header: {
				'content-type': 'application/x-www-form-urlencoded; charset=UTF-8' //重点
			},
			success: (res) => {
				if(res.data.includes("两次密码输入不相同。")){
					uni.showToast({
						title: '两次密码输入不相同。',
						icon:'none',
						duration: 2000
					});
				}else if(res.data.includes("请输入密码。")){
					uni.showToast({
						title: '请输入密码。',
						icon:'none',
						duration: 2000
					});
				}else if(res.data.includes("请输入要修改的账户。")){
					uni.showToast({
						title: '请输入要修改的账户。',
						icon:'none',
						duration: 2000
					});
				}else if(res.data.includes("请输入短信验证码。")){
					uni.showToast({
						title: '请输入短信验证码。',
						icon:'none',
						duration: 2000
					});
				}else{
					uni.showToast({
						title: '修改成功。',
						icon:'none',
						duration: 2000
					});
					uni.setStorageSync('token', 'token')
					uni.switchTab({ url: '/pages/login/login' })
				}
			}
		})
	}
	const getPhoneCheck = () => {
		uni.request({
			url: 'http://recommender.starsky.fun/Home/Public/getcode.html?tel=' + register.username,
			method: 'get',
			success: (res) => {
				uni.showToast({
					title: `${res.data.msg}`,
					icon: 'none',
					duration: 2000
				});
			}
		})
	}
</script>

<template>
	<view class="login-content">
		<view class="statusBarHeight" :style="{ height: statusBarHeight * 2 + 'rpx' }"></view>
		<nav-bar title="忘记密码" />
		<view class="logo-box">
			<image src="http://recommender.starsky.fun/tpl/Public/xsm/img/logob.png" class="logo-img"
				mode="scaleToFill" />
		</view>
		<view class="submit-box">
			<view class="login-input">
				<image src="http://recommender.starsky.fun/tpl/Public/xsm/img/login_phone.png" class="input-img"
					mode="scaleToFill" />
				<input type="text" v-model="register.username" class="input-content" placeholder="请输入手机号码">
			</view>
			<view class="login-input">
				<image src="http://recommender.starsky.fun/tpl/Public/xsm/img/code.png" class="input-img"
					mode="scaleToFill" />
				<input type="text" v-model="register.code" class="input-content" placeholder="请输入短信验证码">
				<input style="position: absolute;
    height: 2.8rem;
    line-height: 3rem;
    top: 0;
    right: 10px;
    display: inline-block;
    width: 6rem;
    background: transparent;
    color: #fd6620;
	font-size: 13px;" type="button" id="getcode" @click="getPhoneCheck" value="获取短信验证码">
			</view>
		<!-- 	<view class="login-input">
				<image src="http://recommender.starsky.fun/tpl/Public/xsm/img/user.png" class="input-img"
					mode="scaleToFill" />
				<input type="text" v-model="register.nickname" class="input-content" placeholder="请输入您的昵称">
			</view> -->
			<view class="login-input">
				<image src="http://recommender.starsky.fun/tpl/Public/xsm/img/login_password.png" class="input-img"
					mode="scaleToFill" />
				<input type="password" v-model="register.password" class="input-content" placeholder="请输入您的密码">
			</view>
			<view class="login-input">
				<image src="http://recommender.starsky.fun/tpl/Public/xsm/img/login_password.png" class="input-img"
					mode="scaleToFill" />
				<input type="password" v-model="register.repassword" class="input-content" placeholder="请再次输入您的密码">
			</view>
		</view>
		<view class="login-btn">
			<button class="submit" @click="submit">提交</button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.login-content {
		height: 100vh;

		.statusBarHeight {
			background-color: #faca2a;
		}

		.logo-box {
			width: 160rpx;
			height: 160rpx;
			margin: 128rpx auto;

			.logo-img {
				width: 160rpx;
				height: 160rpx;
			}
		}

		.submit-box {
			.login-input {
				position: relative;
				height: 88rpx;
				margin: 0 45rpx 32rpx;
				background-color: #ededed;
				border-radius: 44rpx;

				.input-img {
					position: absolute;
					top: 50%;
					left: 16rpx;
					transform: translate(0, -50%);
					width: 76rpx;
					height: 76rpx;
				}

				.input-content {
					height: 100%;
					padding-left: 96rpx;
					font-size: 27rpx;
				}
			}
		}

		.login-regbox {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 64rpx;
			margin: 0 67rpx;
			font-size: 28rpx;
			color: #999;
		}

		.login-btn {
			margin: 16rpx 45rpx 0;
			height: 100px;

			.submit {
				height: 100rpx;
				background-color: #faca2a;
				border-radius: 50rpx;
				font-size: 32rpx;
				line-height: 100rpx;
			}
		}

		.login-bottom {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 80rpx;
			font-size: 24rpx;
			color: #a1a1a1;
			background-color: white;

			.agree-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
			}

			.text {
				color: #576b93;
			}
		}
	}
</style>
